<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Address</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link th:href="@{css/bootstrap.css}" type="text/css" rel="stylesheet" media="all">
    <link th:href="@{css/style.css}" type="text/css" rel="stylesheet" media="all">
    <script th:src="@{js/jquery-3.4.1.js}"></script>
    <link th:href='@{fonts/Aladin-Fonts.css}' rel='stylesheet' type='text/css'/>
    <link th:href="@{css/animate.css}" rel="stylesheet" type="text/css" media="all">
    <link rel="stylesheet" th:href="@{css/element.css}">
    <script th:src="@{js/vue.js}"></script>
    <script th:src="@{js/element.js}"></script>
    <script th:src="@{js/axios.js}"></script>
    <script th:src="@{js/dataParse.js}"></script>
</head>
<body>
<!--banner-->
<div class="banner about-bnr">
    <div class="bnr-img">
        <img class="wow fadeInLeftBig animated" data-wow-delay=".5s" src="images/a.png" alt=""/>
    </div>
    <div th:replace="top-list.html"></div>
    <div class="banner-text">
        <h1 class="wow fadeInDown animated" data-wow-delay=".5s"><a th:href="@{index}">POI - Coffee </a></h1>
        <h2 class="wow fadeInUp animated" data-wow-delay=".5s"><a th:href="@{index}">主页</a> / 地址管理</h2>
    </div>
    <div class="clearfix"></div>
</div>
<!--//banner-->
<!-- gallery -->
<div id="app">
    <div class="container" style="margin-top: 20px; position: relative;">
        <h4 class="title">ADDRESS</h4>
        <h3 class="title1">START <span>YOUR</span>COFFEE JOURNEY</h3>
        <dzgl></dzgl>
    </div>
</div>
<template id="dzgl">
    <div>
        <el-form :label-position="labelPosition" label-width="80px" :model="ruleForm">
            <el-form-item label="地址信息">
                <el-cascader
                        :options="options"
                        v-model="selectedOptions"
                        @change="handleChange"
                        :separator="' '"
                        style="width:100%"
                >
                </el-cascader>
            </el-form-item>
            <el-form-item label="详细地址">
                <el-input type="textarea" v-model="ruleForm.detailedArea" placeholder="请输入详细地址，精确到门牌号"></el-input>
            </el-form-item>
            <el-form-item label="邮政编码">
                <el-input type="text" v-model="ruleForm.postalCode" placeholder="请输入邮政编码"></el-input>
            </el-form-item>
            <el-form-item label="收货人姓名">
                <el-input type="text" v-model="ruleForm.consignee" placeholder="请输入收货人姓名"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
                <el-input type="text" v-model="ruleForm.consigneePhone" placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item size="large">
                <el-button type="primary" @click="submitForm()">添加新地址</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="address"
                style="width: 100%" v-if="address.length > 0">
            <el-table-column
                    label="地址信息"
                    width="180" prop="area">
            </el-table-column>
            <el-table-column
                    label="详细地址"
                    width="180" prop="detailedArea">
            </el-table-column>
            <el-table-column
                    label="邮政编码"
                    width="180" prop="postalCode">
            </el-table-column>
            <el-table-column
                    label="收货人姓名"
                    width="180" prop="consignee">
            </el-table-column>
            <el-table-column
                    label="手机号码"
                    width="180" prop="consigneePhone">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="height: 50px; position: relative;">
            <el-pagination
                    layout="prev, pager, next"
                    :total="total"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    style="position: absolute; left:39%;">
            </el-pagination>
        </div>
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form>
                <el-form-item label="地址信息" :label-width="formLabelWidth">
                    <el-input autocomplete="off" v-model="area"></el-input>
                </el-form-item>
                <el-form-item label="详细地址" :label-width="formLabelWidth">
                    <el-input autocomplete="off" v-model="detailedArea"></el-input>
                </el-form-item>
                <el-form-item label="邮政编码" :label-width="formLabelWidth">
                    <el-input autocomplete="off" v-model="postalCode"></el-input>
                </el-form-item>
                <el-form-item label="收货人姓名" :label-width="formLabelWidth">
                    <el-input autocomplete="off" v-model="consignee"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" :label-width="formLabelWidth">
                    <el-input autocomplete="off" v-model="consigneePhone"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateAddress()">确定修改</el-button>
            </div>
            <el-dialog
                    width="30%"
                    title="修改失败"
                    :visible.sync="innerVisible"
                    append-to-body>
                修改地址失败，请检查信息填写是否正确。
            </el-dialog>
        </el-dialog>
    </div>
</template>
<div th:replace="fotter-all.html"></div>
<script th:src="@{js/address.js}">
</script>
</body>
</html>
